<template>
  <div>
    <div class="box">
      <el-form class="el-form" v-model="form">
        <div class="title">
          <h2>后台管理系统</h2>
          <p>ELECTRlTYSYSTEM</p>
        </div>
        <el-form-item>
          <el-input v-model="form.user" type="text" class="el-input" />
          <el-input v-model="form.pass" type="password" class="el-input" />
        </el-form-item>
        <el-form-item>
          <p class="yi">
            <input type="checkbox" class="fu" />我已同意<span class="lan"
              >《系统用户使用协议》</span
            >必读
          </p>
        </el-form-item>
        <el-form-item>
          <el-button class="login" type="primary" @click="login"
            >登陆</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {login} from "../api/api";
export default {
  components: {},
  data() {
    return {
      form: {
        user: "18888888888",
        pass: "123456",
      },
    };
  },
  mounted() {},
  methods: {
    login() {
      login(this.form.user, this.form.pass).then((res) => {
       if (res.data.code == 200) {
          this.$message({
            message: "ok恭喜你登录成功！！！",
            type: "success",
          });
          localStorage.setItem("token", res.data.data.token);
          this.$router.push({ name: "home" });
        } else if (res.data.code == 500) {
          this.$message.error("账号或者密码错误请重新输入！！！");
        }
      });
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background: rgba(10, 181, 255, 0.836)
    url("http://pc.qingwuit.com/dist/images/login_bg.png?04d71e0fcec12c0866eabf59ba80efdb")
    no-repeat;
  background-size: 60% 80%;
}
.el-form {
  width: 451px;
  height: 447px;
  background: #fff;
  float: right;
  margin-right: 260px;
  margin-top: 160px;
  border-radius: 10px;
}
.title {
  width: 60%;
  height: 100px;
  text-align: center;
  line-height: 50px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(211, 211, 211, 0.721);
}
.el-input {
  width: 60%;
  margin-left: 90px;
  margin-top: 20px;
}
.login {
  width: 60%;
  height: 40px;
  margin-left: 90px;
  margin-top: 20px;
}
.yi {
  width: 60%;
  margin-left: 90px;
  margin-top: 20px;
}
.lan {
  color: rgba(10, 181, 255, 0.836);
  margin-left: 10px;
  margin-right: 10px;
}
.fu {
  margin-right: 10px;
}
</style>